<template>
  <div class="edit-main" style="border: 1px solid #ccc">
    <div class="title-box">
      <input type="text" placeholder="请输入标题">
    </div>
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden;"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
  <div class="bottom-btn-box">
    <button @click="save">保存草稿</button>
    <button @click="publish">发布文章</button>
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, shallowRef} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const mode = ref('default'); // 或 'simple'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {

  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = {}
interface MenuConfig {
  uploadImage?: {
    server: string;
    maxFileSize: number;
    fieldName: string;
    // 可根据实际情况添加更多属性
  };
}

interface EditorConfig {
  placeholder: string;
  MENU_CONF: MenuConfig;
}

const editorConfig: EditorConfig = { placeholder: '请输入内容...', MENU_CONF: {} };

editorConfig.MENU_CONF['uploadImage'] = {
  server: '/api/upload',
  maxFileSize: 10 * 1024 * 1024, // 1M
  // form-data fieldName ，默认值 'wangeditor-uploaded-image'
  fieldName: 'image',
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
const save = () => {
  console.log('保存草稿')
  // 定义请求的 URL 和数据
  const url = '/api/createArticles';
  const data = {
    title: '测试文章',
    content: 'john.doe@example.com',
    author_id: 'John Doe',
    category_id: '1',
    status: 'draft',
  };

  // 发送 POST 请求
  fetch(url, {
    method: 'POST', // 指定请求方法为 POST
    headers: {
      'Content-Type': 'application/json', // 设置请求头，表明发送的是 JSON 数据
    },
    body: JSON.stringify(data), // 将 JavaScript 对象转换为 JSON 字符串
  })
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      return response.json(); // 解析响应为 JSON
    })
    .then(data => {
      console.log('请求成功:', data);
    })
    .catch(error => {
      console.error('请求失败:', error);
    });
}
const publish = () => {
  console.log('发布文章')
}
</script>
<style scoped lang="scss">
.edit-main {
  height: calc(100vh - 50px);
}
.title-box {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px 0 rgba(161, 161, 161, 0.2), 0 0 1vh  rgba(0, 133, 255, 0.17), 0 0 0  currentColor;
  input{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 20px;
  }
}
.bottom-btn-box {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 0 20px 0 rgba(161, 161, 161, 0.2), 0 0 1vh  rgba(0, 133, 255, 0.17), 0 0 0  currentColor;
  button {
    margin: 10px;
    border: none;
    padding: 10px 20px;
    background: linear-gradient(90deg, #03a9f4 0%, #1269d5 100%);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
  }
  button:hover {
    transform: translateY(-2px);
  }
}
</style>